package com.example.composestudy.part7

import androidx.compose.animation.*
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material.Text
import androidx.compose.material.TextButton
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.IntOffset
import androidx.compose.ui.unit.dp

@Preview(showBackground = true)
@Composable
fun EasyAnimation() {
    var visible by remember { mutableStateOf(true) }
    var visible2 by remember { mutableStateOf(true) }
    Column(modifier = Modifier.fillMaxSize().padding(16.dp)) {
        TextButton(onClick = {
            visible = !visible
        }) {
            Text(text = "Click")
        }
        Sample(visible = visible)

        TextButton(onClick = {
            visible2 = !visible2
        }) {
            Text(text = "Click")
        }
        Sample(
            visible = visible2,
            enter = slideIn { IntOffset(400, 400) } + expandIn(),
            exit = slideOut { IntOffset(400, 400) } + shrinkOut(),
        )
    }
}

@Composable
private fun Sample(
    visible: Boolean,
    enter: EnterTransition = fadeIn() + expandIn(),
    exit: ExitTransition = shrinkOut() + fadeOut(),
) {
    AnimatedVisibility(
        visible = visible,
        enter = enter,
        exit = exit,
    ) {
        Text(
            text = "关于混合模式，有多达十几种，在展示下文代码前，我们需要先达成一个共识，这个混合模式，" +
                    "是两个图片相交区域的混合模式，如果不相交，那么混合模式根本不会生效。\n" +
                    "\n" +
                    "所以这就决定了你绘制图片和绘制形状时，图形位置不同就可能会出现奇怪的混合结果。\n" +
                    "\n" +
                    "下文的代码我们会分别绘制大小相同的png图片（如下图所示）以及绘制形状来展示其区别。\n" +
                    "————————————————\n"
        )
    }
}